<template>
  <div class="addDialog">
    <el-dialog
      :title="$t('add')"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="450px"
    >
      <el-form
        ref="ruleForm"
        :model="addForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item :label="$t('eqpName')" prop="eqpId">
          <el-select v-model="addForm.eqpId" clearable>
            <el-option
              v-for="item in eqpNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('marginLeft')" prop="left">
          <el-input
            v-model.trim="addForm.left"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"/>
        </el-form-item>
        <el-form-item :label="$t('marginTop')" prop="top">
          <el-input
            v-model.trim="addForm.top"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"/>
        </el-form-item>
        <el-form-item :label="$t('DeviceWidth')" prop="width">
          <el-input v-model.trim="addForm.width" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('DeviceHeight')" prop="height">
          <el-input v-model.trim="addForm.height" :disabled="true"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button icon="el-icon-circle-close" @click="closeDialog">{{
          $t("cancel")
        }}</el-button>
        <el-button
          v-btnThrottle="newAdd"
          icon="el-icon-receiving"
          type="primary">{{ $t('confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import layoutApi from '@/api/production/layoutDesign'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'

export default {
  name: 'AddDialog',
  components: {},
  mixins: [mySetting, networkTips],
  data() {
    return {
      dialogFormVisible: false,
      addForm: {
        layoutId: this.$route.params.LayoutId,
        width: 100,
        height: 100
      },
      eqpNameList: [],
      rules: {
        eqpId: [
          { required: true, message: this.$t('warnMarginEqpId'), trigger: 'change' }
        ],
        left: [
          { required: true, message: this.$t('warnMarginLeft'), trigger: 'blur' }
        ],
        top: [
          { required: true, message: this.$t('warnMarginTop'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    newAdd() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { layoutId, left, top, width, height, eqpId } = this.addForm
          layoutApi.newAdd({ layoutId, left, top, width, height, eqpId }).then((res) => {
            this.$betterTips(res, this.closeDialog, this.handleUpdate)
          })
        } else {
          return false
        }
      })
    },
    // 获取设备类型列表
    async getEquipmentTypesList() {
      const res = await layoutApi.getHandleIdList()
      this.eqpNameList = res.data
    },
    // 关闭弹窗
    closeDialog() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 打开弹窗
    openDialog() {
      this.getEquipmentTypesList()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    handleUpdate() {
      this.$emit('getLayoutEqps')
    }
  }
}
</script>
<style lang='scss' scoped>
.el-select {
  width: 100%;
}
</style>
